<template>
	<view class="my-venues">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
								  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<view class="list" v-if="list.length">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="" v-if="currentTab == 0">
					<!-- <view class="share_a" v-if="item.beShare == 0">
						<u-button id="shareBtn" plain='true' open-type="share" v-if="item.field_type != 2"
							customStyle="border:none ;color :linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%);" @click="fx_click(item)">分享</u-button>
					</view> -->
					<view class="share_m" v-if="item.beShare == 1">
						球友分享
						<!-- <u-button id="shareBtn" customStyle="border:none">被分享</u-button> -->
					</view>
				</view>
				<view class=""  v-if="currentTab == 1">
					<view class="share_a" v-if="item.is_over == 1" >
						<u-button id="shareBtn" plain='true' open-type="share" 
							customStyle="border:none ;color :#ff0000;" >超时</u-button>
					</view>
					
				</view>
				<navigator v-if="currentTab == 0"
					:url="`/pages_a/my-court/my-court?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.usermobile}&product_id=${item.product_id}&court_id=${item.court_id}&field_type=${item.field_type}`">
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view class="d-flex" style="padding-bottom: 20rpx;">
							<u-image width="160rpx" height="160rpx" radius="10rpx" :src="item.goods.goods_image"></u-image>
						
							<view style="margin-left: 16rpx">
								<view class="name blod">{{ item.court_name}}</view>
								<view class="venue">{{ item.field_name}} </view>
								<view class="date">{{ item.start_time }} - {{ item.end_time }}</view>
							</view>
						</view>
						<image style="width: 100rpx;height: 100rpx;margin-top: 82rpx;" src="https://oss.szsportscenter.cn/img/15f975436471000d4b590e15b3d6c74486e3ca89.png"></image>
					</view>
				</navigator>

				<view class="d-flex" v-if="currentTab == 2" >
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between;width: 100%; " v-if=" item.show_code == true" @click="onTab(item)">
						<view class="d-flex" style="padding-bottom: 20rpx;">
							<u-image width="160rpx" height="160rpx" radius="10rpx" :src="item.goods.goods_image"></u-image>
						
							<view style="margin-left: 16rpx">
								<view class="name blod">{{ item.court_name}}</view>
								<view class="venue">{{ item.field_name}} </view>
								<view class="date">{{ item.start_time }} - {{ item.end_time }}</view>
							</view>
						</view>
						<image style="width: 100rpx;height: 100rpx;margin-top: 82rpx;" src="https://oss.szsportscenter.cn/img/15f975436471000d4b590e15b3d6c74486e3ca89.png"></image>
					</view>
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between;width: 100%; " v-if=" item.show_code == false">
						<view class="d-flex" style="padding-bottom: 20rpx;">
							<u-image width="160rpx" height="160rpx" radius="10rpx" :src="item.goods.goods_image"></u-image>
						
							<view style="margin-left: 16rpx">
								<view class="name blod">{{ item.court_name}}</view>
								<view class="venue">{{ item.field_name}} </view>
								<view class="date">{{ item.start_time }} - {{ item.end_time }}</view>
							</view>
						</view>
						<!-- <image style="width: 100rpx;height: 100rpx;margin-top: 82rpx;" src="https://oss.szsportscenter.cn/img/15f975436471000d4b590e15b3d6c74486e3ca89.png"></image> -->
					</view>
				</view>
				<!-- is_over == 1 超时  ==0 不超时-->
				<navigator  v-if="currentTab == 1  && item.is_over == 1"
					:url="`/pages_a/my-court/my-court?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.usermobile}&product_id=${item.product_id}&court_id=${item.court_id}&field_type=${item.field_type}`">
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view class="d-flex" style="padding-bottom: 20rpx;">
							<u-image width="160rpx" height="160rpx" radius="10rpx" :src="item.goods.goods_image"></u-image>
						
							<view style="margin-left: 16rpx">
								<view class="name blod">{{ item.court_name}}</view>
								<view class="venue">{{ item.field_name}} </view>
								<view class="date">{{ item.start_time }} - {{ item.end_time }}</view>
							</view>
						</view>
						<image style="width: 100rpx;height: 100rpx;margin-top: 82rpx;" src="https://oss.szsportscenter.cn/img/15f975436471000d4b590e15b3d6c74486e3ca89.png"></image>
					</view>
				</navigator>

				<!-- <navigator
					:url="`/pages/personal/qrcode/qrcode?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.usermobile}&product_id=${item.product_id}&court_id=${item.court_id}&field_type=${item.field_type}`">
					<view class="d-flex" v-if="currentTab == 0" style="
					  display: flex;
					  justify-content: space-between;
					  align-items: center;
					">
						<view class="venus-name"> {{item.venue_name}} </view>
						<view class="venus-name" v-if="item.field_type == 2"> 名额场 </view>
						<view class="venus-name" style="color: coral;" v-if="item.field_type == 1"> 包场 </view>
						<view class="venus-name" style="color: coral;" v-if="item.field_type == 3"> 拼团 </view>
						<view style="width: 100rpx; height: 100rpx;margin-top: -40rpx;">
							<view class="qrcode" style="margin-left: 50rpx;margin-top: 50rpx;">
								<u-image :src="`${assetsPath}fdacef21716adb6bb50e280a9351814e2327e9fd.png`"
									width="52rpx" height="52rpx"></u-image>
							</view>
						</view>
					</view>
				</navigator> -->
				<!-- <navigator
					:url="`/pages/personal/qrcode/qrcode?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.usermobile}&product_id=${item.product_id}&court_id=${item.court_id}&field_type=${item.field_type}`">
					<view class="d-flex" v-if="currentTab == 1  && item.is_over == 1" style="
					  display: flex;
					  justify-content: space-between;
					  align-items: center;
					">
						<view class="venus-name"> {{item.venue_name}} </view>
						<view class="venus-name" v-if="item.field_type == 2"> 名额场 </view>
						<view class="venus-name" style="color: coral;" v-if="item.field_type == 1"> 包场 </view>
						<view class="venus-name" style="color: coral;" v-if="item.field_type == 3"> 拼团 </view>
						<view style="width: 100rpx; height: 100rpx;margin-top: -40rpx;">
							<view class="qrcode" style="margin-left: 50rpx;margin-top: 50rpx;">
								<u-image :src="`${assetsPath}fdacef21716adb6bb50e280a9351814e2327e9fd.png`"
									width="52rpx" height="52rpx"></u-image>
							</view>
						</view>
					</view>
				</navigator> -->
			</view>

		</view>


		<u-empty v-else text="暂无数据" icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
		
		<!-- <u-popup border-radius="14" mode='center' :mask-close-able="false" :closeable="false" :show="showPopup">
			<view class="not-logged-in">
				<view class="title">授权小程序</view>
				<u-image width="113" height="90" :src="logosrc"></u-image>
				<view class="desc">需要手机号授权登录</view>
				<view class="btns">
					<button class="btn2" @click="cancelogin">取消授权</button>
					<button class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">立即授权</button>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				share: {
					title: '自定义分享标题',
					fx_goods_image: '',
				},
				panel: false,
				status: 0,
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				tabsList: [{
					name: "待使用"
				},
				{
					name: "待结账"
				}, 
				{
					name: "已结束"
				}],
				list: [],
				listQuery: { //分页
					limit: 8,
					page: 1,
				},
				
				totalPage: "",
				over:"",
				currents:0,
				showPopup: true,
			};
		},
		onLoad(options) {
			this.getMyCourt()
			// if (!uni.getStorageSync("openid")) {
			// 	uni.showToast({
			// 		title: '请先登录！',
			// 		icon:'none',
			// 		duration:1000
			// 	});
			// 	setTimeout(() => {
			// 		uni.navigateTo({
			// 			url:"/pages/personal/personal"
			// 		})
			// 	}, 1800)
			// } else{
			// 	let phone = uni.getStorageSync('phone')
			// 	if (!phone) {
			// 		this.showPopup = true
			// 	} else {
			// 		this.showPopup = false
			// 	}
			// }
		},
		methods: {
			async appletPhoneLogin(params) {
				let that = this
				let data = params
				let result = await index.appletPhoneLogin(data)
				if (result.code == 1) {
					uni.setStorageSync('phone', result.data.phone)
					uni.setStorageSync('openid', result.data.openid)
					that.showPopup = false
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '授权失败，请稍后再试'
					})
				}
			},
			// 获取我的场地详情
			async getMyCourt() {
				let that = this;
				if (that.listQuery.page === 1) that.list = [];
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					open_id: uni.getStorageSync("openid"),
					// open_id: 'oV_bG621EBQSooOUsUBXbZa9vh6c',
					// status: 0,
					id: '',
					expired: this.currents,
					page: this.listQuery.page,
					limit: this.listQuery.limit,
					over:this.over
				}
				let res = await index.getMyCourt(params)
				if (res.code === 1) {
					// this.list = res.data.result
					that.list = that.list.concat(res.data.ticketData); //将数据拼接在一起
					that.totalPage = res.data.page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.getMyCourt()
			},
			// /pages_a/my-court/my-court?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}
			// &sender=${item.usermobile}&product_id=${item.product_id}&court_id=${item.court_id}&field_type=${item.field_type}`
			onTab(item){
				uni.navigateTo({
					url: "/pages_a/my-court/my-court?court_no=" +
						item.court_no + "&id=" + item.id +
						"&title=" + '我的场地' + "&choose=" + '选择场地' + "&beShare=" +
						item.beShare + "&sender=" + item.usermobile + "&product_id=" + item.product_id +
						"&court_id=" + item.court_id + "&field_type=" + item.field_type,
				});
			},
			onClickTab({
				index

			}) {
				if (index == 1) {
					this.over = 1
				} else{
					this.over = ''
				}
				if (index == 0) {
					this.currents = 0;
				} else{
					this.currents = 1;
				}
				this.currentTab = index;
				this.list = []
				this.listQuery.page = 1
				this.getMyCourt()
			},
			fx_click(item) {
				this.share.fx_goods_image = item.goods.goods_image
			},
			// 分享页面
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
				}
				return {
					title: '苏州市体育中心',
					path: '/pages/personal/personal?id=' + 12,
					imageUrl: this.share.fx_goods_image, //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
					success: function(res) {
						// 转发成功之后的回调
						if (res.errMsg == 'shareAppMessage:ok') {}
					},
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.venus-name {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.share {
		width: 68rpx;
		height: 68rpx;
		background: rgb(18, 132, 247);
		// background: linear-gradient(45deg,
		// 		rgba(18, 132, 247, 1) 0%,
		// 		rgba(7, 177, 253, 1) 77%,
		// 		rgba(87, 202, 251, 1) 100%);
		background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
		border-bottom-left-radius: 100rpx;
		position: absolute;
		right: 0;
		top: 0;

		/deep/ .u-icon {
			display: flex;
			justify-content: flex-end;
			margin-right: 7rpx;
		}
	}

	.share_s {
		font-size: 32rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		color: #4BA677;
	}

	.my-venues {
		padding-bottom: env(safe-area-inset-bottom);

		/deep/.u-tabs {
			background-color: #fff;
			// border-bottom: 1px solid #e5e5e5;
			// margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 20rpx;
			line-height: 34rpx;
			color: #333333;
		}

		.item {
			padding: 20rpx 0 0 20rpx;
			background: #ffffff;
			box-shadow: 0px 6rpx 13rpx 1rpx rgba(23, 106, 180, 0.2);
			border-radius: 20rpx;
			position: relative;

			&+.item {
				margin-top: 30rpx;
			}

			.name {
				font-size: 30rpx;
			}

			.venue {
				font-size: 24rpx;
				margin: 19rpx 0;
			}

			.date {
				font-size: 24rpx;
				color: #888888;
			}

			.to {
				background: #f3f3f3;
				border-radius: 50%;
				width: 51rpx;
				height: 51rpx;
			}

			.share_m {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 12%;
				right: -30rpx;
				font-size: 25rpx;

			}

			.share_mc {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 18%;
				right: 160rpx;
				font-size: 25rpx;

			}

			.share_a {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 5%;
				right: 3rpx;

				#shareBtn {
					width: 110rpx;
					height: 60rpx;
					position: absolute;
					border-radius: 50%;
					top: 0;
					left: -2rpx;
					opacity: 0.1;
					font-size: 20rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
	}
</style>
